/**
 * Created by admin on 2014/9/19.
 */
    var ul = $('.header-wrap ul'),
        li = $('.header-wrap ul li');
    li.each(function(){
        if($(this).hasClass('active')){
            var _width = $(this).width();
                temp = 0;
                n = $(this).index();
            for (var x = 0;x < n;x++) {
                temp += li.eq(x).width();
            }
            $("<img src='img/quare.png' alt='' class='quare'/>").appendTo($(this)).css({
                "width" : _width + 35,
                "left" : temp -15
            });
        }
    });
    ul.hover(function(){
        li.each(function(){
            $(this).hover(function(){
                var n_li = $(this).index(),
                    temp1 = 0;
                for (var x = 0;x < n_li;x++) {
                    temp1 += li.eq(x).width();
                }
                $('.quare').stop().animate({
                    left : temp1 - 15,
                    width : $(this).width() - 130 + 165
                },{
                    easing: 'swing',
                    duration: 200
                })
            },function(){

            })
        })
    },function(){
        $('.quare').animate({
            left : temp-15,
            width : li.eq(n).width() + 35
        },{
            easing: 'linear',
            duration: 200
        })
    })